<script setup>
import {computed, onMounted, ref} from 'vue'
import request from "@/utils/request";
const flag = ref(false)
const allOrderData = ref()




const tableData = ref([]);
const loadOrderData = ()=>{
  request.get('/order/user').then(res => {
    allOrderData.value = res.data

  })
}
const userInfo = ref({
  avatar :'',
  birthday:'',
  email:'',
  gender:'',
  id:undefined,
  nickname:'',
  phoneNum:'',
  roleIds:'',
  status:''
})
const loadUserinfo =()=> {
  request.get(`/users/myinfo`).then(res => {
    Object.assign(userInfo.value,res.data)
  })
}
//查看订单详情------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
const dialogVisible =ref(false)
const orderData = ref()
const handleClose = ()=>{
  dialogVisible.value = false
  orderData.value=''
}
const showOrderDetail = (order)=>{
  orderData.value=order
  dialogVisible.value=true
}
//日期格式formater
const formatDate= (date)=> {
  var d = new Date(date),
      month = '' + (d.getMonth() + 1),
      day = '' + d.getDate(),
      year = d.getFullYear();

  if (month.length < 2)
    month = '0' + month;
  if (day.length < 2)
    day = '0' + day;

  return [year, month, day].join('-');
}
//字典数值---------------------------------------------------------------------------------------
const orderStatusOptions = ref()
const cityOptions = ref()
const paymentMethodOptions = ref()
const storeOptions = ref()

//加载字典项----------------------------------------------------------------------
const loadAllDictOptions = ()=>{
  loadDictOptionsByCode(orderStatusOptions,'bus_order_status')
  loadDictOptionsByCode(cityOptions,'bus_city_id')
  loadDictOptionsByCode(paymentMethodOptions,'bus_order_payment_method')
  loadDictOptionsByCode(storeOptions,'bus_order_store')


}
//formatter-----------------------------------------------------------------
const orderStatusFormatter = (val)=>{
  for(let index in orderStatusOptions.value){
    if(orderStatusOptions.value[index].value==val){
      val = orderStatusOptions.value[index].label
      return val
    }
  }
  return val
}
const cityFormatter = (val)=>{
  for(let index in cityOptions.value){
    if(cityOptions.value[index].value==val){
      val = cityOptions.value[index].label
      return val
    }
  }
  return val
}
const paymentMethodFormatter = (val)=>{
  for(let index in paymentMethodOptions.value){
    if(paymentMethodOptions.value[index].value==val){
      val = paymentMethodOptions.value[index].label
      return val
    }
  }
  return val
}
const storeFormatter = (val)=>{
  for(let index in storeOptions.value){
    if(storeOptions.value[index].value==val){
      val = storeOptions.value[index].label
      return val
    }
  }
  return val
}
onMounted(()=>{

  loadOrderData()
  loadUserinfo()
  loadAllDictOptions()
  flag.value = true

})

</script>

<template>

<div style="width: 100%;border: 1px solid rgb(220, 223, 230)">
  <div style="padding: 20px 20px" v-if="flag===true">
    <h2>我的首页</h2>
    <el-row  :gutter="20">
      <el-col :span="18">
        <div style="display: flex; ">
          <el-avatar shape="square" :size="150" :src="userInfo.avatar" />
          <div style="margin-left: 20px">
            <p>欢迎您 {{userInfo.nickname}}</p>
            <p>邮箱：{{userInfo.email}}</p>
            <p>手机：{{userInfo.phoneNum}}</p>

          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
<!--          <span>可用余额 ¥0</span>-->
        </div>
      </el-col>
    </el-row>
    <el-row>
      <h2>最近订单</h2>
      <el-table :data="allOrderData" style="width: 100%">
        <el-table-column prop="id" label="订单编号" width="180">
          <template #default="scope">
            <el-button link type="primary" @click="showOrderDetail(scope.row)">{{scope.row.id}}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="订单创建时间" width="180" />
        <el-table-column prop="brandInfo" label="车辆信息" />
        <el-table-column  label="	取车时间" >
          <template #default="scope">
            <span >{{formatDate(scope.row.startDate)}}</span>
          </template>
        </el-table-column>
        <el-table-column  label="	还车时间" >
          <template #default="scope">
            <span >{{formatDate(scope.row.endDate)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="orderStatus" label="	订单状态" >
          <template #default="scope">
            <span >{{orderStatusFormatter(scope.row.orderStatus)}}</span>
          </template>
        </el-table-column>

      </el-table>
      <el-dialog v-model="dialogVisible" title="订单详情" style="width: 700px" :before-close="handleClose">
        <el-form ref="form" :model="orderData" label-width="80px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="订单id" label-width="120px" prop="id">
                : {{orderData.id}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车辆信息" label-width="120px" prop="brandInfo">
                : {{orderData.brandInfo}}
              </el-form-item>

            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="取车城市id" label-width="120px" prop="pickupCityId">
                : {{cityFormatter(orderData.pickupCityId)}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="取车地" label-width="120px" prop="addr">
                : {{storeFormatter(orderData.addr)}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="取车时间" label-width="120px" prop="startDate">
                : {{formatDate(orderData.startDate)}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="还车时间" label-width="120px" prop="endDate">
                : {{formatDate(orderData.endDate)}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="花费金额" label-width="120px" prop="totalCost">
                : {{orderData.totalCost}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="支付类型" label-width="120px" prop="paymentMethod">
                : {{paymentMethodFormatter(orderData.paymentMethod)}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="订单创建时间" prop="createTime" style="margin-right: 40px" label-width="120px">
                : {{orderData.createTime}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单支付时间" label-width="120px" prop="paymentDate">
                : {{orderData.paymentDate}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="订单状态" label-width="120px" prop="orderStatus">
                : {{orderStatusFormatter(orderData.orderStatus)}}
              </el-form-item>

            </el-col>
            <el-col :span="8">

            </el-col>
            <el-col :span="4">
              <el-button @click="handleClose">返回</el-button>

            </el-col>
          </el-row>
        </el-form>
      </el-dialog>
      <el-dialog v-model="cancelOrderDialogVisible" title="取消订单" style="width: 600px" :before-close="handleCancelOrderDialogClose">
        <el-form-item label-width="20">
          <el-form-item label="取消原因">
            <el-input
                v-model="cancellationReason"
                style="width: 450px"
                :rows="2"
                type="textarea"
                placeholder="请输入原因"
            />
          </el-form-item>
        </el-form-item>
        <el-row>
          <el-col :span="16"></el-col>
          <el-col :span="8">
            <el-button @click="handleCancelOrderDialogClose">返回</el-button>
            <el-button type="primary" @click="handleCancel">确定取消</el-button>

          </el-col>
        </el-row>


      </el-dialog>


    </el-row>
  </div>

</div>
</template>

<style scoped>

</style>